<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.tab{
				display: flex;
				
			}
			.tabitem{
				flex: 1;
				border: 1px solid #CCC;
				text-align: center;
			}
			.active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="tab">
				<div v-bind:class="{tabitem:isTabitem,active:current==0?true:false}" @click="changeCurrent(0)">
					选项一
				</div>
				<div class="tabitem" :class="{active:current==1?true:false}" @click="changeCurrent(1)">
					选项二
				</div>
				
			</div>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
				    isTabitem:true,
					isActive:true,
					current:0
					
				},
				methods: {
					changeCurrent(current){
						this.current=current;
					}
				}
			})
		</script>
	</body>
</html>
